<template>
<div class="BaZiPaiPanPanel">
  <div class="view" :style="{height:viewHeight+'rem'}">
    <div class="v_back"></div>
    <div class="conn">
      <div class="nameDiv">
        <div style="position: absolute;color: #B7B7B7; font-size: 0.24rem;font-weight: 400;left: 0.5rem;top: 0.4rem;">姓名</div>
        <input class="inputCode" type="text"   ref="refinput" placeholder='请输入姓名' @input="handlerchange" :value="store.state.userName">
      </div>
      <div class="xinxDiv ">
        <div class="nan elementRow" @click="genderClick(Enum.gender_1)">
          <div :class="[(store.state.gender===Enum.gender_1?'xzok':'xzno')]"></div>
          <div style="position: relative;width: 0.7rem;line-height: 0.36rem;">男</div>
        </div>
        <div class="n elementRow" @click="genderClick(Enum.gender_0)">
          <div :class="[(store.state.gender===Enum.gender_0?'xzok':'xzno')]"></div>
          <div style="position: relative;width: 0.7rem;line-height: 0.36rem;">女</div>
        </div>
        <div class="addr elementRow" @click="addrBtnClick()">
          <div style="position: relative;width: 1.2rem;line-height: 0.36rem;">真太阳时</div>
          <div class="addbg2">
            <img src="../../assets/img/ui/xz_y.png" style="position: relative;width: 0.22rem;height: 0.22rem;left: -0.15rem;top: 0rem;"
            :style="{left:(store.state.view.addressPanel===Enum.view_status_1?0.15:-0.15)+'rem'}">
          </div>

        </div>
      </div>
      <div class="dateBtnDiv elementRow" @click="dateBtnClick()">
        <div style="position: absolute;color: #B7B7B7; font-size: 0.24rem;font-weight: 400;left: 0.5rem;top: 0.4rem;">出生时间</div>
        <div class="datetxt">{{store.state.dateData[0]}}-{{store.state.dateData[1]}}-{{store.state.dateData[2]}}  {{store.state.dateData[3]}}:{{store.state.dateData[4]}}</div>
        <img src="../../assets/img/ui/3jiaoR.png"
             :style="{transform:'rotate('+(store.state.view.dateSPanel===Enum.view_status_1?180:0)+'deg)'}">
      </div>

      <div class="paiBtnDiv ">
        <div class="jpai elementRow" @click="paiBtnClick(Enum.paiType_0)">
          <div :class="[(store.state.selectPaiType===Enum.paiType_0?'xzok':'xzno')]"></div>
          <div style="position: relative;width: 0.7rem;line-height: 0.36rem;">简排</div>
        </div>
        <div class="qpai elementRow" @click="paiBtnClick(Enum.paiType_1)">
          <div :class="[(store.state.selectPaiType===Enum.paiType_1?'xzok':'xzno')]"></div>
          <div style="position: relative;width: 0.7rem;line-height: 0.36rem;">全排</div>
        </div>
      </div>

      <div class="chaquBtn" @click="chaquBtnClick()"></div>
      <div class="wanyeardate" @click="wanyeardateBtnClick()">万年历</div>
    </div>

  </div>
</div>
</template>

<style scoped>
 .BaZiPaiPanPanel{
   width: 7.5rem;font-size: 0.24rem;height: 100%;
 }
 .view{
   position: relative;width: 7.5rem; overflow-y:auto;overflow-x:hidden;
 }
 .conn{
   position: relative;width: 100%;padding-top: 4.8rem;
 }
 .wanyeardate{
   position: absolute; right: 0.2rem;top:0.2rem;color: #666666;width: 1.46rem;height: 0.36rem;background-color: #FFFFFF;
   border-radius: 0.1rem;line-height: 0.36rem;
 }
 .dateBtnDiv{
   position: relative;background-color: #FFFFFF;width:7rem;height: 1rem;left: 0.25rem;border-radius: 0.5rem;
   font-size: 0.26rem;margin-top: 1rem;
 }
 .dateBtnDiv img{
   position:absolute;width: 0.3rem;height: 0.18rem;left: 6.2rem;top: 0.4rem;
 }
 .dateBtnDiv .datetxt{
   position:absolute;background-color:transparent;width: 4.5rem;line-height: 1rem;text-align: left;left: 1.5rem;
   top: 0rem;font-weight: 400;font-size: 0.28rem;color: #242424;padding-left: 0.2rem;
 }

 .v_back{
   position: absolute;
   background-image: url("../../assets/img/ui/back.png");width: 7.5rem;height: 16.8rem;
 }

 .nameDiv{
   position: relative;background-color: #FFFFFF;width:7rem;height: 1rem;left: 0.25rem;border-radius: 0.5rem;
   font-size: 0.26rem;
 }
 .nameDiv .inputCode{
   background-color:transparent;position:absolute;width: 5rem;height: 1rem;text-align: left;left: 1.5rem;
   outline:none;top: 0rem;font-weight: 400;font-size: 0.28rem;color: #242424;
 }

 .xinxDiv{
   position: relative;width: 7.5rem;height: 0.4rem;margin-top: 0.5rem;color: #242424;font-size: 0.26rem;font-weight: 400;
   display:flex;display: -webkit-flex;flex-direction:row;
 }
 .xinxDiv .nan{
   position:relative; padding-left: 0.7rem;
 }
 .xinxDiv .n{
   position:relative;margin-left: 0.2rem;margin-right: 0.2rem;
   padding-left: 0.2rem;font-size: 0.26rem;
 }
 .xinxDiv .addr{
   position:relative;font-size: 0.24rem;margin-left: 1.8rem;
 }
 .xinxDiv .xzok{
   position:relative;background-image: url("../../assets/img/ui/xz_ok.png");width: 0.24rem;height: 0.24rem;top:0.05rem;
 }
 .xinxDiv .xzno{
   position:relative;background-image: url("../../assets/img/ui/xz_no.png");width: 0.24rem;height: 0.24rem;top:0.05rem;
 }
 .xinxDiv .addbg2{
   position:relative;background-image: url("../../assets/img/ui/addbg2.png");width: 0.62rem;height: 0.3rem;    top: 0.06rem;
 }

 .paiBtnDiv{
   position: relative;width: 7.5rem;height: 0.4rem;margin-top: 0.5rem;color: #242424;font-size: 0.26rem;font-weight: 400;
   display:flex;display: -webkit-flex;flex-direction:row;
 }
 .paiBtnDiv .jpai{
   position:relative; padding-left: 0.7rem;
 }
 .paiBtnDiv .qpai{
   position:relative;margin-left: 0.2rem;margin-right: 0.2rem;
   padding-left: 0.2rem;font-size: 0.26rem;
 }

 .paiBtnDiv .xzok{
   position:relative;background-image: url("../../assets/img/ui/xz_ok.png");width: 0.24rem;height: 0.24rem;top:0.05rem;
 }
 .paiBtnDiv .xzno{
   position:relative;background-image: url("../../assets/img/ui/xz_no.png");width: 0.24rem;height: 0.24rem;top:0.05rem;
 }
 .chaquBtn{
   position: absolute;background-image: url("../../assets/img/ui/cxBtn.png");width: 7rem;height: 1rem;left: 0.25rem;top:10.7rem;
 }
</style>
<script setup>


import Enum from "@/gamejs/Enum";
import {ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import {useRouter} from "vue-router";
import Util from "@/gamejs/Util";
let router = useRouter();
let store = useStore();

let refinput=ref(null);
let viewHeight=ref(17);
let clsid=winApp.getClsId();
/*组件挂载完成后执行的函数；*/
onMounted(() => {
  console.log("BaZiPaiPanPanel onMounted");
  let _h=Math.floor(document.body.clientHeight/(window._windSize/100))/100;
  //viewHeight.value=_h-store.state.bottomPanelHeight-0.1;
  viewHeight.value=_h;
  //router.push({ path:Enum.paiPanXinxiPanelpath, query: {t: (new Date()).getTime()}});
  if(store.state.dateData.length===0){
    let _tdate=Util.getDateNow();
    store.state.dateData=[_tdate.year,_tdate.month,_tdate.day,_tdate.hours,_tdate.minutes];
  }
});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  if(store.state.view.dateSPanel!==Enum.view_status_0){
    store.state.view.dateSPanel=Enum.view_status_2;
  }

  console.log("BaZiPaiPanPanel onUnmounted  卸载组件实例后");
});


function dateBtnClick(){
  store.state.view.dateSPanel=Enum.view_status_1;
}
function addrBtnClick(){
  console.log('BaZiPaiPanPanel addrBtnClick');

  store.state.view.addressPanel=Enum.view_status_1;
}
function chaquBtnClick(){
  console.log('BaZiPaiPanPanel chaquBtnClick 提交查询');
  getPaiPanData();

}
function paiBtnClick(type){
  console.log('BaZiPaiPanPanel paiBtnClick 排盘');
  store.state.selectPaiType=type;
  //router.push({ path:'/DebugDateSelectPanel', query: {t: (new Date()).getTime()}});

}
function wanyeardateBtnClick(){
  router.push({ path:Enum.wanNingLiPanel, query: {t: (new Date()).getTime()}});
}

function genderClick(type){

  store.state.gender=type;
  console.log('BaZiPaiPanPanel genderClick 性别点击',refinput.value.value);
}
let handlerchange = (event) => {
  store.state.userName=refinput.value.value;
  console.log("BaZiPaiPanPanel handlerchange ",refinput.value.value,);
}

function getPaiPanData(){
  console.log("BaZiPaiPanPanel getPaiPanData 排盘查询");
  if(store.state.dateData===null){
    winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'请选择日期');
    return;
  }
 router.push({ path:Enum.paiPanXinxiPanelpath, query: {t: (new Date()).getTime(),view:'paiBanpath'}});
 //router.push({ path:Enum.paiPanXinxiPanelpath, query: {t: (new Date()).getTime(),recdid:'825'}});
}



</script>
